<template>
  <div class="pro">
    <div class="pro-nav">
      <div class="att-header">
        <div class="verticalLine"></div>项目公司人员管理列表
      </div>
      <div class="att-select">
        <div class="select">
          <span>登录名：</span>
          <input type="text" v-model="formInline.loginName" placeholder="请输入登录名" />
        </div>
        <div class="select">
          <span>真实姓名：</span>
          <input type="text" v-model="formInline.name" placeholder="请输入真实姓名" />
        </div>
        <div class="select">
          <span>身份证号：</span>
          <input type="text" v-model="formInline.cardNum" placeholder="请输入身份证号" />
        </div>
        <div class="att-ss">
          <svg title="搜索 " class="iconsousuo ic" aria-hidden="true" @click="sousuo">
            <use xlink:href="#iconsousuo" />
          </svg>
        </div>
        <div class="att-but" @click="ProDao">新增录入</div>
      </div>
      <div class="att-table">
        <table>
          <thead>
            <th>序号</th>
            <th>登录名</th>
            <th>真实姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>身份证号</th>
            <th>手机号</th>
            <th>单位名称</th>
            <th>职位名称</th>
            <th>紧急联系人姓名</th>
            <th>紧急联系人电话</th>
            <th>填报人姓名</th>
            <th>注册日期</th>
            <th>更新人姓名</th>
            <th>更新时间</th>
            <th>操作</th>
          </thead>
          <tbody>
            <tr align="center" v-for="(item,index) in list" :key="item.id">
              <td>{{index+1}}</td>
              <td>{{item.loginName}}</td>
              <td>{{item.name}}</td>
              <td>{{item.sex}}</td>
              <td>{{item.age}}</td>
              <td>{{item.cardNum}}</td>
              <td>{{item.phoneNum}}</td>
              <td>{{item.unitName}}</td>
              <td>{{item.positionName}}</td>
              <td>{{item.emergencyContactName}}</td>
              <td>{{item.emergencyContactTel}}</td>
              <td>{{item.createUsername}}</td>
              <td>{{item.createTime}}</td>
              <td>{{item.updateUsername}}</td>
              <td>{{item.upTime}}</td>
              <td>
                <img src="../../assets/images/fill-view.png" @click="handleClick(item)" />
                <img src="../../assets/images/edit.png" @click="edit(item)" />
                <img src="../../assets/images/remove.png" @click="del(item)" />
              </td>
            </tr>
          </tbody>
        </table>
        <div class="table-noData" v-if="list.length===0">暂无数据</div>
      </div>
      <div class="paging">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[14]"
          :page-size="14"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 查看弹窗 -->
    <div class="SeePopup" v-if="See">
      <div class="addFrom">
        <div class="att-header">
          <div class="verticalLine"></div>项目人员信息查看
          <svg title="关闭 " class="iconsousuo ic" aria-hidden="true" @click="Return">
            <use xlink:href="#iconfill-closed" />
          </svg>
        </div>
        <ul>
          <li>
            <span>登录名</span>
            <el-input v-model="viewForms.input1" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>真实姓名</span>
            <el-input v-model="viewForms.input3" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <p>性别</p>
            <el-input v-model="viewForms.input4" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>年龄</span>
            <el-input v-model="viewForms.input5" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>身份证号</span>
            <el-input v-model="viewForms.input6" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>手机号</span>
            <el-input v-model="viewForms.input7" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>单位名称</span>
            <el-input v-model="viewForms.input8" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>职位名称</span>
            <el-input v-model="viewForms.input9" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>紧急联系人姓名</span>
            <el-input v-model="viewForms.input10" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>紧急联系人电话</span>
            <el-input v-model="viewForms.input11" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>注册时间</span>
            <el-input v-model="viewForms.input12" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>填报人名称</span>
            <el-input v-model="viewForms.input13" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>更新人名称</span>
            <el-input v-model="viewForms.input14" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>更新人时间</span>
            <el-input v-model="viewForms.input15" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
        </ul>
      </div>
    </div>
    <!-- 修改弹窗 -->
    <div class="ModifyPopup" v-if="Modify">
      <div class="addFrom clear">
        <div class="att-header">
          <div class="verticalLine"></div>项目人员信息修改
          <svg title="搜索 " class="iconsousuo ic" aria-hidden="true" @click="Return">
            <use xlink:href="#iconfill-closed" />
          </svg>
        </div>
        <ul>
          <li>
            <span>登录名</span>
            <el-input
              v-model="modifyForms.input1"
              :readonly="true"
              placeholder="请输入内容"
              style="margin-top: 8px;"
            ></el-input>
          </li>
          <li>
            <span>
              <i>*</i>密码
            </span>
            <el-input v-model="modifyForms.input2" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>
              <i>*</i>真实姓名
            </span>
            <el-input v-model="modifyForms.input3" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <p>
              <i>*</i>性别
            </p>
            <el-select v-model="modifyForms.input4" style="margin-top: 8px;">
              <el-option
                v-for="item in modifyForms.options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
          <li>
            <span>
              <i>*</i>年龄
            </span>
            <el-input v-model="modifyForms.input5" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>
              <i>*</i>身份证号
            </span>
            <el-input v-model="modifyForms.input6" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>
              <i>*</i>手机号
            </span>
            <el-input v-model="modifyForms.input7" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>
              <i>*</i>单位名称
            </span>
            <el-input v-model="modifyForms.input8" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <p>
              <i>*</i>职位名称
            </p>
            <el-select v-model="modifyForms.input9" style="margin-top: 8px;">
              <el-option
                v-for="item in arr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
          <li>
            <span>
              <i>*</i>紧急联系人姓名
            </span>
            <el-input v-model="modifyForms.input10" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>
              <i>*</i>紧急联系人电话
            </span>
            <el-input v-model="modifyForms.input11" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>注册时间</span>
            <el-input v-model="modifyForms.input12" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
        </ul>
        <div class="att-btn">
          <span @click="submission">确定</span>
          <span @click="Return">取消</span>
        </div>
      </div>
    </div>
    <!-- 新增弹窗 -->
    <div div class="AddPopup" v-if="Add">
      <div class="addFrom">
        <div class="att-header">
          <div class="verticalLine"></div>项目人员信息添加
          <svg title="搜索 " class="iconsousuo ic" aria-hidden="true" @click="Return">
            <use xlink:href="#iconfill-closed" />
          </svg>
        </div>
        <ul>
          <li>
            <span>
              <i>*</i>登录名
            </span>
            <el-input v-model="addFroms.input1" placeholder="请输入登录名" style="margin-top: 8px;"></el-input>
            <p class="reg">{{reg.input1}}</p>
          </li>
          <li>
            <span>
              <i>*</i>密码
            </span>
            <el-input v-model="addFroms.input2" placeholder="请输入密码" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>
              <i>*</i>真实姓名
            </span>
            <el-input v-model="addFroms.input3" placeholder="请输入真实姓名" style="margin-top: 8px;"></el-input>
            <p class="reg">{{reg.input14}}</p>
          </li>
          <li>
            <p>
              <i>*</i>性别
            </p>
            <el-select v-model="addFroms.input4" placeholder="请选择" style="margin-top: 8px;">
              <el-option
                v-for="item in addFroms.options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
          <li>
            <span>
              <i>*</i>年龄
            </span>
            <el-input v-model="addFroms.input5" placeholder="请输入年龄" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>
              <i>*</i>身份证号
            </span>
            <el-input v-model="addFroms.input6" placeholder="请输入身份证号" style="margin-top: 8px;"></el-input>
            <p class="reg">{{reg.input4}}</p>
          </li>
          <li>
            <span>
              <i>*</i>手机号
            </span>
            <el-input v-model="addFroms.input7" placeholder="请输入手机号" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>
              <i>*</i>单位名称
            </span>
            <el-input v-model="addFroms.input8" placeholder="请输入单位名称" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <p>
              <i>*</i>职位名称
            </p>
            <el-select v-model="addFroms.input9" placeholder="请选择" style="margin-top: 8px;">
              <el-option
                v-for="item in arr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>

          <li>
            <span>
              <i>*</i>紧急联系人姓名
            </span>
            <el-input v-model="addFroms.input10" placeholder="请输入紧急联系人姓名" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>
              <i>*</i>紧急联系人电话
            </span>
            <el-input v-model="addFroms.input11" placeholder="请输入紧急联系人电话" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>更新人名称</span>
            <el-input
              v-model="addFroms.input12"
              placeholder="请输入更新人名称"
              :readonly="true"
              style="margin-top: 8px;"
            ></el-input>
          </li>
        </ul>
        <div class="att-btn">
          <span @click="confirm">确定</span>
          <span @click="Return">取消</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  query,
  queryName,
  del,
  obtainPosition,
  edit,
  add
} from "@/service/personnel/index";
export default {
  data() {
    return {
      See: false,
      Modify: false,
      Add: false,
      flag: true,
      arr: [],
      reg: {
        input1: "",
        input14: ""
      },
      value: "",
      input1: "",
      value2: "",
      value3: "",
      current: "",
      viewForms: {
        input1: "",
        input3: "",
        input4: "",
        input5: "",
        input6: "",
        input7: "",
        input8: "",
        input9: "",
        input10: "",
        input11: "",
        input12: "",
        input13: "",
        input14: "",
        input15: ""
      },
      modifyForms: {
        id: "",
        input1: "",
        input2: "",
        input3: "",
        input4: "",
        input5: "",
        input6: "",
        input7: "",
        input8: "",
        input9: "",
        input10: "",
        input11: "",
        input12: "",
        options1: [
          {
            value: "男",
            label: "男"
          },
          {
            value: "女",
            label: "女"
          }
        ]
      },
      addFroms: {
        gettime: "",
        input1: "",
        input2: "",
        input3: "",
        input4: "",
        input5: "",
        input6: "",
        input7: "",
        input8: "",
        input9: "",
        input10: "",
        input11: "",
        options1: [
          {
            value: "男",
            label: "男"
          },
          {
            value: "女",
            label: "女"
          }
        ]
      },
      formInline: {
        loginName: "",
        name: "",
        cardNum: ""
      },
      total: null,
      list: []
    };
  },
  created: function() {
    const params = {
      current: "1",
      size: "14"
    };
    query(params).then(res => {
      this.total = res.data.obj.total;
      this.list = res.data.obj.records;
    });
    obtainPosition().then(res => {
      this.arr = res.data.obj.map(item => {
        return { value: item.positionName, label: item.positionName };
      });
    });
  },
  methods: {
    handleSizeChange(val) {
      window.console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.current = val;
      const params = {
        current: val,
        size: "14"
      };
      query(params).then(res => {
        this.list = res.data.obj.records;
      });
    },
    //查看弹窗
    handleClick(item) {
      this.See = true;
      this.viewForms.input1 = item.loginName;
      this.viewForms.input3 = item.name;
      this.viewForms.input4 = item.sex;
      this.viewForms.input5 = item.age;
      this.viewForms.input6 = item.cardNum;
      this.viewForms.input7 = item.phoneNum;
      this.viewForms.input8 = item.unitName;
      this.viewForms.input9 = item.positionName;
      this.viewForms.input10 = item.emergencyContactName;
      this.viewForms.input11 = item.emergencyContactTel;
      this.viewForms.input12 = item.createTime;
      this.viewForms.input13 = item.createUsername;
      this.viewForms.input14 = item.updateUsername;
      this.viewForms.input15 = item.upTime;
    },
    //关闭弹窗
    Return() {
      this.See = false;
      this.Modify = false;
      this.Add = false;
    },
    //搜索
    sousuo() {
      const params = {
        loginName: this.formInline.loginName,
        name: this.formInline.name,
        cardNum: this.formInline.cardNum
      };
      queryName(params).then(res => {
        this.total = res.data.obj.total;
        this.list = res.data.obj.records;
      });
    },
    //新增
    ProDao() {
      this.Add = true;
    },
    //新增提交
    confirm() {
      if (this.addFroms.input1 === "") {
        this.$message.error("请输入登录名");
      } else if (this.addFroms.input2 === "") {
        this.$message.error("请输入密码");
      } else if (this.addFroms.input3 === "") {
        this.$message.error("请输入真实姓名");
      } else if (this.addFroms.input4 === "") {
        this.$message.error("请选择性别");
      } else if (this.addFroms.input5 === "") {
        this.$message.error("请输入年龄");
      } else if (this.addFroms.input6 === "") {
        this.$message.error("请输入身份证号");
      } else if (this.addFroms.input7 === "") {
        this.$message.error("请输入手机号");
      } else if (this.addFroms.input8 === "") {
        this.$message.error("请输入单位名称");
      } else if (this.addFroms.input9 === "") {
        this.$message.error("请选择职位");
      } else if (this.addFroms.input10 === "") {
        this.$message.error("请输入紧急联系人姓名");
      } else if (this.addFroms.input11 === "") {
        this.$message.error("请输入紧急联系人电话");
      } else {
        const yy = new Date().getFullYear();
        const mm = new Date().getMonth() + 1;
        const dd = new Date().getDate();
        const hh = new Date().getHours();
        const mf =
          new Date().getMinutes() < 10
            ? "0" + new Date().getMinutes()
            : new Date().getMinutes();
        const ss =
          new Date().getSeconds() < 10
            ? "0" + new Date().getSeconds()
            : new Date().getSeconds();
        this.addFroms.gettime =
          yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
        const params = {
          loginName: this.addFroms.input1,
          password: this.addFroms.input2,
          name: this.addFroms.input3,
          sex: this.addFroms.input4,
          age: this.addFroms.input5,
          cardNum: this.addFroms.input6,
          phoneNum: this.addFroms.input7,
          unitName: this.addFroms.input8,
          positionName: this.addFroms.input9,
          emergencyContactName: this.addFroms.input10,
          emergencyContactTel: this.addFroms.input11,
          createUserId: window.sessionStorage.getItem("id"),
          createTime: this.addFroms.gettime,
          upTime: this.addFroms.gettime,
          createUsername: window.sessionStorage.getItem("name"),
          updateUsername: window.sessionStorage.getItem("name")
        };
        add(params).then(res => {
          if (res.data.status === 200) {
            this.$message({
              type: "success",
              message: "提交成功!"
            });
            this.Add = false;
            this.addFroms = "";
            const params = {
              current: this.current,
              size: "14"
            };
            query(params).then(res => {
              this.total = res.data.obj.total;
              this.list = res.data.obj.records;
            });
          }
        });
      }
    },
    //编辑
    edit(item) {
      this.Modify = true;
      this.modifyForms.id = item.id;
      this.modifyForms.input1 = item.loginName;
      this.modifyForms.input2 = item.password;
      this.modifyForms.input3 = item.name;
      this.modifyForms.input4 = item.sex;
      this.modifyForms.input5 = item.age;
      this.modifyForms.input6 = item.cardNum;
      this.modifyForms.input7 = item.phoneNum;
      this.modifyForms.input8 = item.unitName;
      this.modifyForms.input9 = item.positionName;
      this.modifyForms.input10 = item.emergencyContactName;
      this.modifyForms.input11 = item.emergencyContactTel;
      this.modifyForms.input12 = item.createTime;
    },
    //修改提交
    submission() {
      if (this.modifyForms.input2 === "") {
        this.$message.error("请输入密码");
      } else if (this.modifyForms.input3 === "") {
        this.$message.error("请输入真实姓名");
      } else if (this.modifyForms.input4 === "") {
        this.$message.error("请选择性别");
      } else if (this.modifyForms.input5 === "") {
        this.$message.error("请输入年龄");
      } else if (this.modifyForms.input6 === "") {
        this.$message.error("请输入身份证号");
      } else if (this.modifyForms.input7 === "") {
        this.$message.error("请输入手机号");
      } else if (this.modifyForms.input8 === "") {
        this.$message.error("请输入单位名称");
      } else if (this.modifyForms.input9 === "") {
        this.$message.error("请选择职位");
      } else if (this.modifyForms.input10 === "") {
        this.$message.error("请输入紧急联系人姓名");
      } else if (this.modifyForms.input11 === "") {
        this.$message.error("请输入紧急联系人电话");
      } else {
        const yy = new Date().getFullYear();
        const mm = new Date().getMonth() + 1;
        const dd = new Date().getDate();
        const hh = new Date().getHours();
        const mf =
          new Date().getMinutes() < 10
            ? "0" + new Date().getMinutes()
            : new Date().getMinutes();
        const ss =
          new Date().getSeconds() < 10
            ? "0" + new Date().getSeconds()
            : new Date().getSeconds();
        const params = {
          id: this.modifyForms.id,
          loginName: this.modifyForms.input1,
          password: this.modifyForms.input2,
          name: this.modifyForms.input3,
          sex: this.modifyForms.input4,
          age: this.modifyForms.input5,
          cardNum: this.modifyForms.input6,
          phoneNum: this.modifyForms.input7,
          unitName: this.modifyForms.input8,
          positionName: this.modifyForms.input9,
          emergencyContactName: this.modifyForms.input10,
          emergencyContactTel: this.modifyForms.input11,
          updateUsername: window.sessionStorage.getItem("name"),
          upTime: yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss
        };
        window.console.log(params);
        edit(params).then(res => {
          if (res.data.status === 200) {
            this.$message({
              type: "success",
              message: "提交成功!"
            });
            this.Modify = false;
            const params = {
              current: this.current,
              size: "14"
            };
            query(params).then(res => {
              this.total = res.data.obj.total;
              this.list = res.data.obj.records;
            });
          }
        });
      }
    },
    //删除
    del(item) {
      const id = item.id;
      this.$confirm("永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          del(id).then(res => {
            window.console.log(this.list);
            if (res.data.status === 200) {
              const params = {
                current: this.current,
                size: "14"
              };
              query(params).then(res => {
                this.total = res.data.obj.total;
                this.list = res.data.obj.records;
              });
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/personnel/projectSide.scss";
</style>